<template>
  <div class="h-full w-full flex flex-col justify-between">
    <div class="form px-[15px] pt-[15px] border-bottom">
      <el-form>
        <el-row :gutter="12">
          <el-col :span="3">
            <el-form-item>
              <el-input v-model="form.name" placeholder="用户名/昵称/备注" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-input v-model="form.issue" placeholder="请输入期号" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-select class="!w-full" v-model="form.type">
                <el-option
                  v-for="item in statusType"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-select class="!w-full" v-model="form.lottery_id">
                <el-option label="全部游戏" value="-1" />
                <el-option
                  v-for="item in gameTotal"
                  :key="item.LotteryId"
                  :label="item.Name"
                  :value="item.LotteryId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <div class="w-full flex justify-between">
                <el-date-picker
                  v-model="form.date"
                  type="daterange"
                  unlink-panels
                  range-separator="－"
                  start-placeholder="选择开始时间"
                  end-placeholder="选择结束时间"
                  :disabled-date="disableFutureDates"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click.stop="search">搜索</el-button>
              <el-button type="danger" @click.stop="handleRefresh">清空</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="px-[15px] pt-[10px]">
      <el-button type="success" @click="handleBtnDate('today')">今天</el-button>
      <el-button type="success" @click="handleBtnDate('yesterday')">昨天</el-button>
      <el-button type="success" @click="handleBtnDate('thisWeek')">本周</el-button>
      <el-button type="success" @click="handleBtnDate('lastWeek')">上周</el-button>
      <el-button type="success" @click="handleBtnDate('thisMonth')">本月</el-button>
      <el-button type="success" @click="handleBtnDate('lastMonth')">上月</el-button>
    </div>
    <div class="grow-[1] h-0 mx-[15px] mt-[10px]">
      <el-table
        scrollbar-always-on
        ref="elTableRef"
        v-loading="state.loading"
        :data="list"
        style="width: 100%"
        height="100%"
        border
        stripe
        fit
      >
        <template #empty>
          <ui-empty />
        </template>
        <el-table-column align="center" prop="Type" label="类型" width="130">
          <template #default="{ row }: TableItem">
            <el-button :type="typeMap[row.Type]?.type" size="small">
              {{ typeMap[row.Type]?.text || "--" }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="LotteryName"
          align="center"
          label="游戏"
          width="230"
          show-overflow-tooltip
        >
          <template #default="{ row }: TableItem">
            {{ row.LotteryName || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="CreatedAt" label="时间" width="170">
          <template #default="{ row }: TableItem">
            {{ formatDate(row.CreatedAt) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="Name"
          label="用户名"
          show-overflow-tooltip
          min-width="80"
        />
        <el-table-column
          align="center"
          prop="Nickname"
          label="昵称"
          show-overflow-tooltip
          min-width="80"
        >
          <template #default="{ row }: TableItem">
            {{ row.Nickname || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="Note" align="center" label="备注" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            {{ row.Note || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="Coin" align="center" label="积分">
          <template #default="{ row }: TableItem">
            <ui-amount :num="row.Coin"></ui-amount>
          </template>
        </el-table-column>
        <el-table-column prop="BalanceBefore" align="center" label="变动前积分">
          <template #default="{ row }: TableItem">
            <ui-amount :num="row.BalanceBefore"></ui-amount>
          </template>
        </el-table-column>
        <el-table-column prop="BalanceAfter" align="center" label="变动后积分">
          <template #default="{ row }: TableItem">
            <ui-amount :num="row.BalanceAfter"></ui-amount>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-between my-[10px] mx-[15px]">
      <div class="flex-1 w-0 mr-[20px] flex justify-start">
        <div>
          <el-alert
            title="注意：报表最多保留两月数据。"
            type="warning"
            show-icon
            :closable="false"
          />
        </div>
      </div>
      <ui-pagination
        :total="state.total"
        v-model:pageSize="state.pageSize"
        v-model:currentPage="state.page"
        @current-change="getData"
      ></ui-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useList } from "@/hooks/useList";
import { reqReportCoinRecord } from "@/api/report";
import { useGameStore } from "@/store/modules/game";
import { storeToRefs } from "pinia";
import { disableFutureDates, formatDate, getDateArray } from "@/utils/common";
import moment from "moment";

interface TableItem {
  row: ReportCoinRecordMo;
}
interface Params {
  Issue?: string;
  Name?: string;
  Type?: string;
  StartDate?: string;
  EndDate?: string;
  LotteryId?: string;
}
const gameStore = useGameStore();
const { gameTotal } = storeToRefs(gameStore);

const statusType = [
  { name: "全部类型", value: "-1" },
  { name: "上分申请", value: "1" },
  { name: "下分申请", value: "2" },
  { name: "上分驳回", value: "3" },
  { name: "上分通过", value: "4" },
  { name: "下分驳回", value: "5" },
  { name: "下分通过", value: "6" },
  { name: "投注", value: "7" },
  { name: "投注盈利", value: "8" },
  { name: "红包", value: "9" },
  { name: "佣金", value: "10" },
  { name: "反水", value: "11" },
  { name: "游客体验金", value: "12" },
  { name: "订单取消", value: "13" },
  { name: "活动", value: "14" }
];

const typeMap = reactive<Record<string, TextType>>({
  1: { text: "上分申请", type: "primary" },
  2: { text: "下分申请", type: "primary" },
  3: { text: "上分驳回", type: "danger" },
  4: { text: "上分通过", type: "success" },
  5: { text: "下分驳回", type: "danger" },
  6: { text: "下分通过", type: "success" },
  7: { text: "投注", type: "primary" },
  8: { text: "投注盈利", type: "success" },
  9: { text: "红包", type: "danger" },
  10: { text: "佣金", type: "info" },
  11: { text: "反水", type: "info" },
  12: { text: "游客体验金", type: "info" },
  13: { text: "订单取消", type: "danger" },
  14: { text: "活动", type: "warning" }
});
const selectDate = ref<string>("today");
const getDate = () => {
  const date: Record<string, string[]> = getDateArray();
  return date;
};
const form = reactive({
  lottery_id: "-1",
  issue: "",
  name: "",
  type: "-1",
  date: getDateArray()["today"]
});

const getParams = () => {
  const params: Params = {};
  if (form.issue) {
    params.Issue = form.issue;
  }
  if (form.name) {
    params.Name = form.name;
  }
  if (form.type && form.type != "-1") {
    params.Type = form.type;
  }
  if (form.date) {
    params.StartDate = moment(form.date[0]).format("YYYY-MM-DD 00:00:00");
    params.EndDate = moment(form.date[1]).format("YYYY-MM-DD 23:59:59");
  }
  if (form.lottery_id && form.lottery_id != "-1") {
    params.LotteryId = form.lottery_id;
  }
  return params;
};

const { elTableRef, state, list, getData, search } = useList<ReportCoinRecordMo, Params>(
  reqReportCoinRecord,
  getParams
);

const handleBtnDate = (str: string) => {
  const date = getDate();
  selectDate.value = str;
  form.date = date[str];
  search();
};

// 重置
const handleRefresh = () => {
  form.lottery_id = "-1";
  form.issue = "";
  form.name = "";
  form.type = "-1";
  form.date = getDateArray()["today"];
  search();
};

onMounted(() => {
  getData();
});
</script>
